

import UploadFile from "@/components/FileUpload";
import request from "@/utils/request";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import { Button, Col, ColProps, Form, message, Row, Select } from "antd";
import React, { useCallback, useEffect, useState } from "react";
import style from './ai.less'

const layoutDef: {
  labelCol: ColProps
  wrapperCol: ColProps
} = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 18
  }
}


/**
 * 查询异步结果
 * @param taskId 
 */
async function queryAsyncResult(taskId: string, callback: (rs: any) => void) {
  const { data } = await request(`/api/ai/video/query?taskId=${taskId}`, {
    method: 'GET'
  })

  if (data.statusCode === 200 && data.body?.data?.status === 'PROCESS_SUCCESS') {
    return callback(JSON.parse(data.body?.data?.result))
  }

  setTimeout(() => {
    queryAsyncResult(taskId, callback)
  }, 1000)
  // return await
}
function useAiVideo() {

  const [form] = Form.useForm()
  const [loading, setLoading] = useState<boolean>(false)
  const [videoUrl, setVideoUrl] = useState<string>('')

  const handleCreate = useCallback(() => {
    form.validateFields().then(rs => {
      if (rs) {
        const { files, ...rest } = rs
        const ops = {
          fileList: files.map(f => {
            const fs = f.url.split('/')
            const fileName = fs[fs.length - 1]
            const type = /\.mp4/.test(fileName) ? 'video' : 'image'
            return {
              type,
              fileName,
              fileUrl: f.url
            }
          }),
          runtimeOpt: rest
        }

        setLoading(true)

        request('/api/ai/video/create', {
          method: 'post',
          data: ops
        }).then(rs => {
          if (rs.data && rs.data.statusCode === 200) {
            const { body: { requestId } } = rs.data
            queryAsyncResult(requestId, vodeo => {
              setLoading(false)
              message.success('生成视频成功!')
              setVideoUrl(vodeo.VideoUrl)
            })
          }
        })
      }
    })
  }, [])




  return {
    form,
    handleCreate,
    loading,
    videoUrl
  }
}

export default () => {

  const { form, handleCreate, loading, videoUrl } = useAiVideo()
  return (
    <PageHeaderWrapper>
      <div className={style["vi-container"]}>
        <div className={style["vi-form"]}>
          <Form form={form} {...layoutDef}>
            <Form.Item name={'files'} label='视频'>
              <UploadFile length={5} />
            </Form.Item>
            <Form.Item
              name={'Scene'}
              label='场景类型'
            >
              <Select>
                <Select.Option key={'costume'}>服饰场景</Select.Option>
                <Select.Option key={'general'}>通用场景</Select.Option>
                <Select.Option key={'keeporder'}>强制按输入素材顺序</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              name={'Style'}
              label='视频节奏'
            >
              <Select>
                <Select.Option key={'normal'}>正常</Select.Option>
                <Select.Option key={'fast'}>快速</Select.Option>
                <Select.Option key={'slow'}>慢速</Select.Option>
              </Select>
            </Form.Item>
            <Row>
              <Col offset={layoutDef.labelCol.span} span={layoutDef.wrapperCol.span}>
                <Button type="primary" block onClick={handleCreate} loading={loading}>生成</Button>
              </Col>
            </Row>
          </Form>
        </div>
        <div className={style["vi-content"]}>
          <div className={style['vi-player']}>
            {videoUrl && <video src={videoUrl} controls></video>}
          </div>
        </div>
      </div>
    </PageHeaderWrapper>

  )
}